import React, { RefObject, useEffect, useState } from "react";

export function useIntersectionObserver(ref: React.RefObject<HTMLDivElement>) {
  const [isIntersecting, setIsIntersecting] = useState(false)

  useEffect(()=>{
    const element = ref.current
    const observer = new IntersectionObserver(entries => {
      console.log(entries)
      const entry = entries[0];
      setIsIntersecting(entry.isIntersecting);
    }, {
       threshold: 1.0
    });
    element && observer.observe(element);
    return () => {
      observer.disconnect();
    }
  },[ref])

  return isIntersecting
}